<template>
  <div class="main">
    <div class="cardataadd">
      <el-card class="box-card">
        <div slot="header"
             class="clearfix">
          <span>车辆通行数据</span>
          <el-button style="float: right; padding: 3px 0"
                     type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <div class="left">
            <el-form :inline="true"
                     :model="formInline1"
                     ref="formInline"
                     class="demo-form-inline">
              <el-form-item label="开始数据">
                <el-input v-model="formInline1.start1"
                          placeholder="开始数据"></el-input>
              </el-form-item>
              <el-form-item label="结束数据">
                <el-input v-model="formInline1.end1"
                          placeholder="结束数据"></el-input>
              </el-form-item>
              <el-form-item label="数据类型">
                <el-select v-model="value"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-select v-model="location"
                           placeholder="请选择">
                  <el-option v-for="item in options1"
                             :key="item.id"
                             :label="item.area_name"
                             :value="item.area_name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属地区">
                <el-select v-model="areaname"
                           placeholder="请选择">
                  <el-option v-for="item in options2"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <el-progress :text-inside="true"
                         :stroke-width="26"
                         :percentage="percentage1"></el-progress>
            <el-button class="ruku"
                       type="primary"
                       @click="addcardata">入库</el-button>
            <el-button class="ruku"
                       @click="resetForm('formInline1')">重置</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div class="table">
      <center>
        <h3>Etc车辆数据</h3>
      </center>
      <el-table :data="tableData"
                style="width: 100%"
                border
                height="280">
        <el-table-column prop="time"
                         label="最后日期"
                         width="180">
        </el-table-column>
        <el-table-column prop="cnt"
                         label="入库总数 ">
        </el-table-column>
        <el-table-column prop="area_name"
                         label="地区名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="start"
                         label="开始数据">
        </el-table-column>
        <el-table-column prop="end"
                         label="结束数据">
        </el-table-column>
        <el-table-column prop="color"
                         label="颜色">
        </el-table-column>

        <el-table-column prop="type"
                         label="种类">
        </el-table-column>
      </el-table>
    </div>

    <div class="table1">
      <center>
        <h3>卡口车辆数据</h3>
      </center>
      <el-table :data="tableData1"
                style="width: 100%"
                height="280">
        <el-table-column prop="time"
                         label="最后日期"
                         width="180">
        </el-table-column>
        <el-table-column prop="cnt"
                         label="入库总数 ">
        </el-table-column>
        <el-table-column prop="area_name"
                         label="地区名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="start"
                         label="开始数据">
        </el-table-column>
        <el-table-column prop="end"
                         label="结束数据">
        </el-table-column>
        <el-table-column prop="color"
                         label="颜色">
        </el-table-column>

        <el-table-column prop="type"
                         label="种类">
        </el-table-column>
      </el-table>
    </div>

    <div class="one">
    </div>
    <div class="two">
    </div>

  </div>
</template>

<script>
import { getAreaname } from '@/api/data'
import { addCardata } from '@/api/data'
import { getEtccardata } from '@/api/data'
import { getKakoucardata } from '@/api/data'
export default {
  data () {
    return {

      options: [
        { value: '1', label: 'Etc车道' },
        { value: '2', label: '卡口' }
      ],
      value: '',
      options1: [],
      location: '',
      formInline1: {
        start1: '',
        end1: ''
      },
      percentage1: 0,

      options2: [
        { value: '海北藏族自治州', label: '海北藏族自治州' },
        { value: '西宁市', label: '西宁市' },
        { value: '海东市', label: '海东市' },
        { value: '黄南藏族自治州', label: '黄南藏族自治州' },
        { value: '海南藏族自治州', label: '海南藏族自治州' },
        { value: '玉树藏族自治州', label: '玉树藏族自治州' },
        { value: '果洛藏族自治州', label: '果洛藏族自治州' },
        { value: '海西蒙古族藏族自治州', label: '海西蒙古族藏族自治州' },
      ],
      areaname: '',

      //Etc表格数据
      tableData: [],

      //卡口表格数据
      tableData1: [],

    }
  },
  created () {
    getAreaname('/data/getAreaname').then(
      res => {
        if (res.code === 200) {
          this.options1 = res.data
        } else {
          this.$message(res.data)
        }

      }
    )

    getEtccardata('/data/getcarEtcData').then(
      res => {
        if (res.code === 200) {
          this.tableData = res.data
        } else if (res.code === 500) {
          this.$message(res.data)
        }
      }
    )

    getKakoucardata('/data/getcarKakouData').then(
      res => {
        if (res.code === 200) {
          this.tableData1 = res.data
        } else if (res.code === 500) {
          this.$message(res.data)
        }
      }
    )


  },
  methods: {
    resetForm (formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
    //增加车辆数据
    addcardata () {
      var params = {
        start: this.formInline1.start1,
        end: this.formInline1.end1,
        area_name: this.areaname,
        from: this.value,
        location: this.location
      }
      addCardata('/data/addCardata', params).then(
        res => {
          if (res.code === 200) {
            this.$message("数据增加成功")
            this.percentage1 = 100
          }
          else {
            this.percentage1 = 50
            this.$message(res.data)
          }
        }
      )
    },

    //echarts1
    one () {

    },

    two () {

    }


  },

}
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  margin-top: 10px;
}
.right {
  float: right;
  width: 48%;
  margin-top: 10px;
}

.cardataadd {
  width: 50%;
  float: left;
}
.ruku {
  margin-top: 35px;
}
.table {
  float: right;
  width: 50%;
}
.table1 {
  float: right;
  width: 50%;
}
</style>